<template>
    <div class="login-main">
        <div class="login-main-content" >

            <div class="logon-title">
                <img src="../src/assets/vue.svg" alt="" class="logo">
                <div class="title-info">vue管理系统</div>
            </div>
            <div class="login-main-form">
                <div class="login-form">
                    <div class="form-title">登录</div>
                    <el-form :model="form" label-position="left" :rules="rules" ref="formvisible"
                        hide-required-asterisk>

                        <el-form-item label="账号" label-width="70" prop="username">
                            <el-input v-model="form.username" prefix-icon="User" />
                        </el-form-item>


                        <el-form-item label="密码" label-width="70" prop="password">
                            <el-input v-model="form.password" prefix-icon="Key" type="password" show-password />
                        </el-form-item>
                        <div class="form-img">
                            <el-form-item label="验证码" label-width="70" class="form-img-item" prop="code">
                                <el-input v-model="form.code" />

                            </el-form-item>
                            <div class="form-img-code">
                                <img :src="codeUrl" class="img" @click="getCode" v-if="codeUrl" />
                                <span v-else>丢失验证码</span>
                            </div>
                        </div>
                        <el-form-item label="记住密码">
                            <el-switch v-model="form.keeppasswored" />
                        </el-form-item>
                        <el-form-item label="登录协议" prop="info">
                            <el-checkbox v-model="form.info" name="type" >
                                <div class="form-checkbox">
                                    我已阅读并同意
                                    用户协议

                                    <span>、
                                        隐私政策
                                        、
                                        产品服务协议</span>

                                </div>

                            </el-checkbox>
                        </el-form-item>

                    </el-form>
                    <el-button @click="gohome" :loading="showlading">{{ showlading ? '登录中...' : '登录'}}</el-button>
                </div>




            </div>


        </div>
     

        <div class="login-footer">鱿鱼须有限公司@XXXXXXXX</div>

    </div>
</template>

<script setup>
import { getCodeImg } from "@/api/login.js";
import { usePermissionStore } from '@/store/modules/permission'
import { isHttp } from '@/utils/validate'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import Cookies from "js-cookie";
const userStore = useUserStore()


const router = useRouter()
const route = useRoute()


const imgvalue = ref(true)
const codeUrl = ref('')
const formvisible = ref(null)
const showlading = ref(false)
const redirect = ref(null)
const form = ref({
    username: "admin",
    password: "admin123",
   
    keeppasswored: false,
    code: "",
    uuid: "",
    info: false,

})
const rules = {
    username:[ {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
    }],
    password:[ {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    }],
    code: [{
        required: true,
        message: '请输入验证码',
        trigger: 'blur'
    }],
    info: [{
        required: true,
        message: '请阅读并同意用户协议',
        trigger: 'change',
         validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请阅读并同意用户协议'));
            } else {
                callback();
            }
        }

    }]
    
}

//获取验证码
const getCode=()=> {
    getCodeImg().then(res => {

        imgvalue.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (imgvalue.value) {
            codeUrl.value = "data:image/gif;base64," + res.img;
            form.value.uuid = res.uuid;
        }
       
        
    });
}



//登录
const gohome = (() => {
    formvisible.value.validate( valid => {
        if (valid) {
            showlading.value = true
            if (form.value.keeppasswored) {
                Cookies.set("username", form.value.username, { expires: 30 });
                Cookies.set("password", encrypt(form.value.password), { expires: 30 });
                Cookies.set("keeppasswored", form.value.keeppasswored, { expires: 30 });
            } else {
                // 否则移除
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove("keeppasswored");
            }
            userStore.login(form.value).then(res => {
                usePermissionStore().generateRoutes().then(accessRoutes => {

                    const heardPath = accessRoutes[0].path.split("/")[1] == '' ? "" : accessRoutes[0].path;
                    accessRoutes.forEach(route => {
                        if (!isHttp(route.path)) {
                            router.addRoute(route)
                        }
                    })
                    let pathIndex = ''
                    pathIndex = heardPath + '/' + accessRoutes[0].children[0].path
                    if (pathIndex != '') {

                        router.push({ path: pathIndex }).catch(() => { })
             
                    }
                })
                
            }).finally(() => {
                showlading.value = false
            }
            ).catch(() => {
                getCode()
            })
        
}
    })

})
onMounted(() => {
    getCode()
})
watch(route, (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
    console.log(redirect.value,'路由的监听');
    
}, { immediate: true });

</script>

<style lang="less" scoped>
.login-main {
    background: url('/src//assets//image.png')no-repeat;
    background-size: cover;

    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .login-main-content {
        padding: 5px;
        height: 400px;
        width: 700px;
        background: rgba(255, 255, 255, 0.6);
        /* 半透明白色背景 */
        backdrop-filter: blur(10px);
        /* 毛玻璃效果，模糊背景 */
        border-radius: 10px;
        /* 可选，圆角边框 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        display: flex;
        justify-content: space-between;

        .logon-title {
            height: 100%;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-wrap: wrap;
            position: relative;

            .logo {

                width: 50%;
                height: 50%;
            }

            .title-info {
                font-weight: bolder;
                font-size: 25px;
                margin: 10px;
                background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
                /* 设置渐变色 */
                -webkit-background-clip: text;
                /* Safari 和 Chrome 浏览器的兼容 */
                color: transparent;

            }

            &::after {
                content: '';
                /* 必须设置 content，伪元素才会显示 */
                position: absolute;
                /* 绝对定位 */
                top: 10px;
                right: 0;
                bottom: 10px;
                /* 定位在右侧 */
                width: 2px;
                /* 设置竖线的宽度 */

                /* 设置竖线的高度为父元素的高度 */
                background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
                /* 设置竖线的颜色 */
            }
        }

        .login-main-form {
            flex: 1;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .login-form {
                width: 100%;
                text-align: center;

                .form-checkbox {

                    font-size: 12px;
                    width: 240px;
                    /* 设置宽度 */
                    white-space: nowrap;
                    /* 不允许换行 */
                    overflow: hidden;
                    /* 隐藏超出部分 */
                    text-overflow: ellipsis;
                    /* 超出部分显示省略号 */
                }

                .form-img {
                    display: flex;
                    justify-content: space-around;

                    .form-img-item {
                        width: 70%;

                        margin-right: 10px;
                        min-width: 100px;
                    }

                    .form-img-code {
                        width: 50%;
                        height: 30px;
                        line-height: 30px;
                       
                        .img{
                            cursor: pointer;
                            height: 100%;
                            width: 100%;
                        }


                    }
                }

                .form-title {
                    font-weight: bolder;
                    font-size: 25px;
                    margin-bottom: 20px;
                    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
                    /* 设置渐变色 */
                    -webkit-background-clip: text;
                    /* Safari 和 Chrome 浏览器的兼容 */
                    color: transparent;
                }
            }

        }

        /* 虚影效果 */
    }

    .login-footer {
        position: fixed;
        bottom: 20px;
        text-align: center;
        color: #33373E;
        font-size: 12px;
        font-weight: bold;
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    .login-main {
        background: url('/src//assets//image.png')no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        .login-main-content {
            padding: 5px;
            height: 400px;
            width: 400px;
            background: rgba(255, 255, 255, 0.6);
            /* 半透明白色背景 */
            backdrop-filter: blur(10px);
            /* 毛玻璃效果，模糊背景 */
            border-radius: 10px;
            /* 可选，圆角边框 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            display: flex;
            justify-content: center;

            .logon-title {
                height: 100%;
                width: 50%;
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                flex-wrap: wrap;
                position: relative;

                .logo {

                    width: 50%;
                    height: 50%;
                }

                .title-info {
                    font-weight: bolder;
                    font-size: 25px;
                    margin: 10px;
                    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
                    /* 设置渐变色 */
                    -webkit-background-clip: text;
                    /* Safari 和 Chrome 浏览器的兼容 */
                    color: transparent;

                }

                &::after {
                    content: '';
                    /* 必须设置 content，伪元素才会显示 */
                    position: absolute;
                    /* 绝对定位 */
                    top: 10px;
                    right: 0;
                    bottom: 10px;
                    /* 定位在右侧 */
                    width: 2px;
                    /* 设置竖线的宽度 */

                    /* 设置竖线的高度为父元素的高度 */
                    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
                    /* 设置竖线的颜色 */
                }
            }

            .login-main-form {
                flex: 1;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;



            }

            /* 虚影效果 */
        }
    }
}

@media (max-width: 576px) {
    .login-main {
        background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
        background-size: 100%;
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        .login-main-content {
            padding: 5px;
            height: 400px;
            width: 400px;
            background: rgba(255, 255, 255, 0.6);
            /* 半透明白色背景 */
            backdrop-filter: blur(10px);
            /* 毛玻璃效果，模糊背景 */
            border-radius: 10px;
            /* 可选，圆角边框 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            display: flex;
            justify-content: center;

            .logon-title {
                height: 100%;
                width: 50%;
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                flex-wrap: wrap;
                position: relative;

                .logo {

                    width: 50%;
                    height: 50%;
                }

                .title-info {
                    font-weight: bolder;
                    font-size: 25px;
                    margin: 10px;
                    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
                    /* 设置渐变色 */
                    -webkit-background-clip: text;
                    /* Safari 和 Chrome 浏览器的兼容 */
                    color: transparent;

                }

                &::after {
                    content: '';
                    /* 必须设置 content，伪元素才会显示 */
                    position: absolute;
                    /* 绝对定位 */
                    top: 10px;
                    right: 0;
                    bottom: 10px;
                    /* 定位在右侧 */
                    width: 2px;
                    /* 设置竖线的宽度 */

                    /* 设置竖线的高度为父元素的高度 */
                    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
                    /* 设置竖线的颜色 */
                }
            }

            .login-main-form {
                flex: 1;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;


            }

            /* 虚影效果 */
        }
    }
}

::v-deep .el-form-item__label {
    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
    /* 设置渐变色 */
    -webkit-background-clip: text;
    /* Safari 和 Chrome 浏览器的兼容 */
    color: transparent;
    font-weight: bold;
}
</style>